<template>
  <div class="apply publicBox">

    <div class="publicBoxTitle ">
      订单详情
    </div>
    <div class="allOrderBox publicBoxContent">
      <div class="nav">
<!--        <div class="line_left line"></div>-->
        <div class="cneter">
          <el-steps :active="act" align-center>
            <el-step title="申请售后"></el-step>
            <el-step title="审核"></el-step>
            <el-step title="退货"></el-step>
            <el-step title="完成"></el-step>
          </el-steps>
        </div>
<!--        <div :class="['line',changRight==1 ? 'chang_line' : 'line_right']"></div>-->
      </div>
      <div class="main">
        <div class="mainLeft">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

              <el-form-item label="售后类型" prop="resource">
                <el-radio v-model="ruleForm.type" label="5">退货且退款</el-radio>
                <el-radio v-model="ruleForm.type" label="1">仅退款</el-radio>
                <img src="../../assets/img/index/jg.png">

                <span class="tkts" v-if="ruleForm.type==5">已收到货，需要退还收到的货物</span>
                <span class="tkts" v-if="ruleForm.type==1">未收到货或到货不全，申请退款</span>
              </el-form-item>


            <el-form-item label="退款原因" prop="return_des">
              <el-select v-model="ruleForm.return_des" placeholder="请选择" style="width: 40%">
                <el-option label="商品质量问题" value="商品质量问题"></el-option>
                <el-option label="拍错" value="拍错"></el-option>
                <el-option label="物流延迟" value="物流延迟"></el-option>
                <el-option label="不想要了" value="不想要了"></el-option>
                <el-option label="其它" value="其它"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="手机号码" prop="phone" >
              <el-input
                  style="width: 40%;"
                  placeholder="请输入手机号码"
                  v-model="ruleForm.phone"
                  clearable>
              </el-input>
            </el-form-item>
            <el-form-item label="退款金额" prop="money" class="tk">
              <el-input
                  :max="goods.total_pay_price"
                  min="0"
                  style="width: 40%;"
                  placeholder="请输入内容"
                  v-model="ruleForm.money"
                  clearable>
              </el-input>
              <span class="money">元
                                <span class="maxMoney">最多可退</span>
                                <span class="moneyStyle">￥{{goods.total_pay_price}}</span>
                            </span>
            </el-form-item>
            <el-form-item label="说明" prop="content">
              <el-input type="textarea" v-model="ruleForm.content"></el-input>
            </el-form-item>
            <el-form-item label="提交凭证" class="voucher"  v-if="ruleForm.type==5">
              <el-upload
                  :action="imgUrl+'/index.php?s=/admin/upload/image'"
                  :headers="headers"
                  :auto-upload="true"
                  :limit=Number(5)
                  :multiple=true
                  name="iFile"
                  list-type="picture-card"
                  :on-success="positiveAvatarSuccess"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" round @click="submitForm('ruleForm')">提交申请</el-button>

            </el-form-item>
          </el-form>
        </div>
        <div class="mainRight">
          <div class="mainbox">
            <div class="yd ydLeft"></div>
            <div class="yd ydRight"></div>
            <div class="pub">
              <span>订单编号：{{goods.child && goods.child.child_no}}
                <span class="xdsj">下单时间：{{goods.create_at}}</span></span>
            </div>
            <div class="pub">
              <span>实付金额：￥{{goods.total_pay_price}} <span class="hyf">(含运费：<span
                  class="hdq">￥0.00</span>)</span></span>
            </div>
            <div class="boxList pub">
              <div class="boxLeft">
                <img :src=" goods.image && $getImg(goods.image)" alt="">
              </div>
              <div class="boxRight">
                <div>{{goods.goods_name}}</div>
                <div v-for="(item,index) in goods.attr" :key="index">{{item[0]}}：{{item[1]}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="shimg">
        <img src="../../assets/img/index/xqsh.jpg">
      </div>
    </div>
  </div>
</template>

<script>
    import config from '../../config'

    export default {
        name: "apply",

        data() {

            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入'));
                } else if (value > this.goods.total_pay_price) {
                    callback(new Error(`最多可退 ${this.goods.total_pay_price}`));
                } else {
                    callback();
                }
            };
            return {
                imgUrl: config.imgUrl,
                headers: {
                    token: ''
                },
                act: 1,
                changRight: '',
                reverse: true,
                show: false,
                order_goods_id: 0,
                goods: {},
                ruleForm: {
                    type: '5',
                    return_des: "",
                    money: '',
                    content: '',
                    phone:''
                },
                rules: {
                    money: [
                        {validator: validatePass2, trigger: 'blur'},
                    ],
                    phone: [
                        {required: true, message: '请输入联系方式', trigger: 'blur'},
                    ],
                    region: [
                        {required: true, message: '请选择', trigger: 'change'}
                    ],
                    content: [
                        {required: true, message: '请填写', trigger: 'blur'}
                    ],
                    return_des: [
                        {required: true, message: '请选择', trigger: 'change'}
                    ]

                },
                dialogImageUrl: '',
                dialogVisible: false,
                imgs: []


            };
        },
        created() {
            this.order_goods_id = this.$route.query.order_goods_id;
            this.getToken();
            this.getList();
        },
        methods: {
            getToken() {
                this.headers.token = window.localStorage.getItem("token");

            },
            getList() {
                this.$HttpGet("/index.php?s=/admin/home.refund/apply", {
                    order_goods_id: this.order_goods_id,
                }).then(res => {
                    if (res.code == 0) {
                        this.goods = res.data;

                        //拆分规格
                        var arr = this.goods.goods_attr.split("|");
                        var endArr = arr.map((item, index) => {
                            return item.split("_")
                        });
                        endArr.pop();
                        this.goods.attr = endArr;
                        this.ruleForm.money=this.goods.total_pay_price

                    }

                })
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let 	is_goods_received =null;
                        if(this.ruleForm.type==5){
                            is_goods_received=1;
                        }
                        if(this.ruleForm.type==1){
                            is_goods_received=2;
                        }
                        this.$HttpPost("/index.php?s=/admin/home.refund/apply", {
                            order_goods_id: this.order_goods_id,
                            images: this.imgs,
                            contact: this.goods.address.name,
                            is_goods_received : is_goods_received,
                            ...this.ruleForm,
                        }).then(res => {
                            if (res.code == 0) {
                                this.$notifySuccess('提交成功')
                                this.$router.push({path: '/index/order/serviceOrder'})
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            handleRemove(file, fileList) {
                var index = this.imgs.indexOf(file.response.data.file_path);
                this.imgs.splice(index, 1);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            positiveAvatarSuccess(res, file) {
                this.dialogImageUrl = res.data.file_path;
                if(this.imgs.length<5){
                    this.imgs.push(this.dialogImageUrl)
                }


            },
        }
    }
</script>

<style lang="scss" scoped>
  .allOrderBox {

    .nav {
      position: relative;
      width: 1020px;
      height: 100%;
      margin: 0 auto;
      padding-top: 16px;
      display: flex;

      .cneter {
        position: relative;
        width: 80%;
        left: 10%;
      }

      .line {
        width: 20%;
        height: 1px;
        margin-top: 11px;
      }

      .line_left {
        position: absolute;
        border-top: 2px solid rgba($color: #409eff, $alpha: 1);

      }

      .line_right {
        position: absolute;
        right: 0;
        border-top: 2px solid rgba($color: #c0c4cc, $alpha: 1);
      }
    }
    .shimg{
      position: relative;
      width: 100%;
      text-align: center;
      img{
        width: 70%;
      }
    }
    .main {
      border-top: 1px solid #EEEEEE;
      display: flex;
      margin-top: 20px;

      .mainLeft, .mainRight {
        width: 40%;

        padding-top: 20px;
      }

      .mainLeft {
        margin-left: 5%;
      }

      .mainRight {
        margin-left: 10%;

        .mainbox {
          position: relative;
          /*width: 484px;*/
          /*height: 326px;*/
          background: #FFFFFF;
          border: 1px solid #EEEEEE;
          border-radius: 5px;
          padding-left: 20px;
          padding-bottom: 20px;

          .yd {
            width: 12px;
            height: 12px;
            background: #3A61CA;
            box-shadow: 1px 2px 2px 0px rgba(0, 0, 0, 0.24);
            border-radius: 50%;
            position: absolute;
            top: -7px;
          }

          .ydLeft {
            left: 66px;
          }

          .ydRight {
            right: 66px;
          }

          .pub {
            margin-top: 20px;

            .xdsj, .hyf {
              margin-top: 20px;
              display: block;
            }

            .hyf {
              .hdq {
                color: #E93030;
              }
            }
          }

          .boxList {
            height: 60px;
            display: flex;

            .boxLeft {
              width: 60px;
              img{
                width: 60px;

              }
            }

            .boxRight {
              padding-left: 15px;
            }
          }
        }
      
        
      }
    }

  }

  .money {
    margin-left: 10px;

    .maxMoney {
      margin-left: 20px;

    }

    .moneyStyle {
      margin-left: 10px;
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #DB3330;
    }
  }

  .tkts {
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #E93030;
    margin-left: 5px;
  }
  .voucher{
    /deep/ .el-form-item__content{
      div:first-child{
        display: flex;
        .el-upload-list--picture-card {
          display: flex;
          flex-wrap: wrap;
          li{
            width: 90px !important;
            height: 90px !important;
          }

        }
        .el-upload--picture-card{
          width: 90px !important;
          height: 90px !important;
          line-height: 90px !important;
        }
      }
    }
  }
  .tk{
    /deep/ .el-form-item__content{
      display: flex;
    }
  }
</style>
